<template>
  <div>
    <!-- 基础题库组件 -->
         <el-alert :closable="false" type="info">
            <div class="left">
              <i class="el-icon-info"></i>
              <span>数据一共 {{total}} 条</span>
            </div>
          </el-alert>
          <el-table :data="arr" style="width: 1880px">
            <el-table-column label="试题编号" prop="number" width="180"></el-table-column>
            <el-table-column label="学科" prop="subject" width="180"></el-table-column>
            <el-table-column label="目录" prop="catalog" width="180"></el-table-column>
            <el-table-column label="题型" prop="questionType" width="180" :formatter="formatterQu"></el-table-column>
            <el-table-column label="题干" prop="question"  width="180">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
            </el-table-column>
            <el-table-column label="录入时间" prop="addDate" width="180">
                <template #default="{row}">
                <span>{{row.addDate | parseTimeByString}}</span>
                </template>
            </el-table-column>
            <el-table-column label="难度" prop="difficulty" width="180" :formatter="formatterDi"></el-table-column>
            <el-table-column label="录入人" prop="creator" ></el-table-column>
            <el-table-column fixed="right" label="操作" width="190">
              <template slot-scope="scope">
                <i> <el-button type="primary" icon="el-icon-view" circle @click="preview(scope.row)" plain size="mini"></el-button></i>&nbsp;
               <i><el-button type="success" icon="el-icon-edit" circle @click.native.prevent="amend(scope.row)" plain size="mini"></el-button></i>&nbsp;
               <i><el-button type="danger" icon="el-icon-delete" circle @click.native.prevent="remove(scope.row)" plain size="mini"></el-button></i>&nbsp;
               <i><el-button type="warning" icon="el-icon-check" circle  @click.native.prevent="add(scope.row)" plain size="mini"></el-button></i>
              </template>
            </el-table-column>
             </el-table>
  </div>
</template>

<script>
// , remove

import { questionType, difficulty } from '../../api/hmmm/constants'
import { choiceAdd } from '../../api/hmmm/questions'
export default {
  name: 'BasicQuestion',
  props: ['arr', 'showExamination', 'total'],
  data () {
    return {
      questionType,
      difficulty,
      putawaytext: '上架',
      parmas: {
        id: '',
        choiceState: 0
      },
      newArr: []
    }
  },
  created () {
    // console.log(this.list)
  },
  methods: {
    // 枚举精选题型
    formatterQu (row) {
      // 判读枚举值是否和后台返回的值是否相等的方式来将数字转换成对应的内容
      const obj = this.questionType.find(item => item.value === Number(row.questionType))
      return obj.label
    },
    // 枚举精选难度
    formatterDi (row) {
      const obj = this.difficulty.find(item => item.value === Number(row.difficulty))
      return obj?.label || ''
    },
    // 预览
    async preview (item) {
      this.$emit('update:showExamination', true)
      this.$emit('setListItem', item)
    },
    // 修改
    async amend (item) {
      await this.$router.push(`/questions/new?id=${item.id}`)
    },
    // 删除当前这一例 触发父组件的函数
    remove (row) {
      this.$emit('remove', row)
    },
    async add (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.parmas.id = row.id
        this.parmas.choiceState = 1
        await choiceAdd(this.parmas)
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        }, {
          message: '加入精选失败!'
        })
        this.$emit('add', row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        })
      })
    }

  }
}
</script>

<style>

</style>
